<script setup lang="ts">
import {reactive, ref} from "vue";
import {ElMessage} from 'element-plus'
import {Plus} from '@element-plus/icons-vue'
import type {UploadProps} from 'element-plus'
import index from '@/components/Editor/index.vue'

const handleClick = () => {
    console.log('click')
}

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: '',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
]
//添加导入
const dialogFormVisible = ref(false)
const importFormVisible = ref(false)

//添加验证
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

interface RuleForm {
    className: string
    collegeName: string
    teacher: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    className: '',
    collegeName: '',
    teacher: ''
})


const rules = reactive<FormRules<RuleForm>>({
    className: [
        { required: true, message: '请输入班级名称', trigger: 'blur' },
    ],
    collegeName: [
        {
            required: true,
            message: '请选择学院',
            trigger: 'change',
        },
    ],
    teacher: [
        {
            required: true,
            message: '请选择负责老师',
            trigger: 'change',
        },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))


</script>

<template>
    <div>
        <el-form-item>
            <el-button plain @click="dialogFormVisible = true">
                添加
            </el-button>
            <el-button plain @click="importFormVisible = true">
                导入
            </el-button>
        </el-form-item>
        <!--        添加弹框-->
        <el-dialog v-model="dialogFormVisible" title="添加" width="430" center="true">
            <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                status-icon
            >
                <el-form-item label="学院名称" prop="region">
                    <el-select v-model="ruleForm.collegeName" placeholder="请选择学院">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item label="班级名称" prop="name">
                    <el-input v-model="ruleForm.className" />
                </el-form-item>
                <el-form-item label="负责老师" prop="region">
                    <el-select v-model="ruleForm.teacher" placeholder="请选择负责老师">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item class="dialog-footer">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        保存
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                </el-form-item>
            </el-form>
            <template #footer>

<!--                <div class="dialog-footer">-->
<!--                    <el-button @click="dialogFormVisible = false">取消</el-button>-->
<!--                    <el-button type="primary" @click="dialogFormVisible = false">-->
<!--                        保存-->
<!--                    </el-button>-->
<!--                </div>-->
            </template>
        </el-dialog>
        <!--        导入弹框-->
        <el-dialog v-model="importFormVisible" title="班级导入" width="430" center="true">

        </el-dialog>
        <el-table :data="tableData" style="width: 100%;">
            <el-table-column prop="name" label="序号" width="300" align="center"/>
            <el-table-column prop="state" label="文章名称" width="300" align="center"/>
            <el-table-column prop="city" label="发布人" width="300" align="center"/>
            <el-table-column prop="address" label="创建时间" width="300" align="center"/>
            <el-table-column prop="zip" label="操作" width="300" align="center"/>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="100" class="page"/>
    </div>
</template>

<style scoped lang="scss">
.page {
    margin-top: 20px;
    margin-left: 1000px;
}

.sectionTop {
    display: flex;
}

//上传图片
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
 .avatar-uploader .el-upload {
     border: 1px dashed var(--el-border-color);
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: var(--el-transition-duration-fast);
 }

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
